<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="vendors/msui/css/msui.css" />
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/app-nav.css">
    <link rel="stylesheet" href="assets/css/analysis.css">
    <link rel="stylesheet" href="vendors/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="vendors/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="vendors/zTree_v3-master/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="vendors/zTree_v3-master/js/jquery.ztree.excheck.js"></script>
    <script src="vendors/Highcharts-6.0.3/code/highstock.js"></script>
    <script src="vendors/Highcharts-6.0.3/code/highcharts-more.js"></script>
    <script src="vendors/Highcharts-6.0.3/code/modules/exporting.js"></script>
    <script src="vendors/Highcharts-6.0.3/code/modules/export-data.js"></script>
    <script src="vendors/Highcharts-6.0.3/code/modules/solid-gauge.js"></script>
    <script src="vendors/Highcharts-6.0.3/code/modules/drilldown.js"></script>
    <script type="text/javascript" src="vendors/msui/js/msui.min.js"></script>
    <script type="text/javascript" src="assets/js/app-nav.js"></script>
    <script type="text/javascript" src="assets/js/analysis.js"></script>
    <script type="text/javascript" src="vendors/echarts.js"></script>
    <script type="text/javascript" src="assets/js/select_tree.js"></script>
</head>

<body>
    <div class="app-nav"></div>
    <div class="app-wrapper">
        <div class="ms-tabs" data-ms-tabs>
            <ul class="ms-tabs-nav ms-nav ms-nav-tabs">
                <li class="ms-active">
                    <a href="#tab1">同比分析</a>
                </li>
                <li>
                    <a href="#tab2">环比分析</a>
                </li>
                <li>
                    <a href="#tab3">对比分析</a>
                </li>
                <!-- <li><a href="#tab4">损耗分析</a></li> -->
                <!-- <li><a href="#tab5">趋势分析</a></li> -->
            </ul>

            <div class="ms-tabs-bd">
                <div class="ms-tab-panel ms-fade ms-in ms-active" id="tab1">

                    区选择 ：
                    <select data-ms-selected id="s1" name="s1"></select> 建筑选择 ：
                    <select data-ms-selected id="s2" name="s2"></select> 楼层选择 ：
                    <select data-ms-selected id="s3" name="s3"> </select> 房间选择 ：
                    <select data-ms-selected id="s4" name="s4"></select>
                    <div class="time">
                        <form action="" class="ms-form ms-form-inline ">
                            当前时间：
                            <div class="ms-form-group ms-form-icon ">
                                <i class="ms-icon-calendar"></i>
                                <input type="text" class="ms-form-field" placeholder="日期" data-ms-datepicker="theme:''">
                            </div>
                            对比时间：
                            <div class="ms-form-group ms-form-icon ">
                                <i class="ms-icon-calendar"></i>
                                <input type="text" class="ms-form-field" placeholder="日期" data-ms-datepicker>
                            </div>
                            <button type="button" class="ms-btn ms-btn-primary ms-radius">查询</button>
                        </form>
                    </div>
                    <div class="Shell" style="width:99%;height:500px;">
                        <div class="title">
                            <p class="text1"> 区域能耗同比分析</p>
                        </div>
                        <div id="main"></div>
                    </div>
                    <div class="Shell" style="width:99%;height:500px;">
                        <div class="title">
                            <p class="text1"> 系统能耗同比分析</p>
                        </div>
                        <div class="ms-tabs" data-ms-tabs>
                            <ul class="ms-tabs-nav ms-nav ms-nav-tabs">
                                <li class="ms-active">
                                    <a href="#lighting">照明系统</a>
                                </li>
                                <li>
                                    <a href="#air">空调系统</a>
                                </li>
                                <li>
                                    <a href="#elevator">电梯系统</a>
                                </li>
                            </ul>

                            <div class="ms-tabs-bd ms-tabs-bd-ofv">
                                <div class="ms-tab-panel ms-fade ms-in ms-active" id="lighting">
                                    <div id="sys-lighting"></div>
                                </div>
                            </div>

                            <div class="ms-tabs-bd ms-tabs-bd-ofv">
                                <div class="ms-tab-panel ms-fade" id="air">
                                    <div id="sys-air"></div>
                                </div>
                            </div>

                            <div class="ms-tabs-bd ms-tabs-bd-ofv">
                                <div class="ms-tab-panel ms-fade" id="elevator">
                                    <div id="sys-elevator"></div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <div class="ms-tab-panel ms-fade" id="tab2">
                    区域 ：
                    <select data-ms-selected id="x1" name="x1"></select> 建筑 ：
                    <select data-ms-selected id="x2" name="x2"></select> 楼层 ：
                    <select data-ms-selected id="x3" name="x3"> </select> 房间 ：
                    <select data-ms-selected id="x4" name="x4"></select>
                    <br/>
                    <p>系统 ：
                        <select data-ms-selected>
                            <option value="o" selected>---</option>
                            <option value="a">照明系统</option>
                            <option value="b">空调系统</option>
                            <option value="b">电梯系统</option>
                        </select>

                        <div class="time">
                            <form action="" class="ms-form ms-form-inline ">
                                时间：
                                <div class="ms-form-group ms-form-icon ">
                                    <i class="ms-icon-calendar"></i>
                                    <input type="text" class="ms-form-field" placeholder="日期" data-ms-datepicker>
                                </div>
                                ——
                                <div class="ms-form-group ms-form-icon ">
                                    <i class="ms-icon-calendar"></i>
                                    <input type="text" class="ms-form-field" placeholder="日期" data-ms-datepicker>
                                </div>
                                <button type="button" class="ms-btn ms-btn-primary ms-radius">查询</button>
                            </form>
                            <div class="Shell" style="width:99%;height:600px;">
                                <div class="title">
                                    <p class="text1"> 区域环比分析</p>
                                </div>
                                <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
                            </div>

                        </div>
                    </p>
                </div>
                <div class="ms-tab-panel ms-fade" id="tab3">
                    <div class="time">
                        <form action="" class="ms-form ms-form-inline ">
                            查询时间：
                            <div class="ms-form-group ms-form-icon ">
                                <i class="ms-icon-calendar"></i>
                                <input type="text" class="ms-form-field" placeholder="日期" data-ms-datepicker>
                            </div>

                        </form>
                        分析对象:
                        <input id="citySel" type="text" readonly value="" style="width:210px;height:36px ;margin:0 13px" onclick="showMenu();" />
                        <!-- <a id="menuBtn" href="#" onclick="showMenu(); return false;">select</a> -->
                        <div id="menuContent" class="menuContent" style="display:none; position: absolute;margin:-115px -159px ;z-index: 100;">
                            <ul id="treeDemo" class="ztree"></ul>

                        </div>
                        <button type="button" class="ms-btn ms-btn-primary ms-radius">查询</button>
                    </div>
                    <div class="Shell" style="width:99%;height:600px;">
                        <div class="title">
                            <p class="text1"> 区域对比分析</p>
                        </div>
                        <div id="main1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
                    </div>
                </div>

                <!-- <div class="ms-tab-panel ms-fade" id="tab4">

                </div>
                <div class="ms-tab-panel ms-fade" id="tab5">

                </div> -->

            </div>
        </div>
    </div>
</body>

</html>